<template>
	<div class="setup">
		<p>count的值为{{count}}</p>
		<button @click="count+=1">+1</button>
	</div>
</template>

<script>
import { reactive } from "@vue/composition-api";
export default {
	setup(props, ctx) {
		//setup() 函数中无法访问到 this
		// console.log("setup:", props);
		// console.log("setup 第二个参数ctx： ", ctx);

		// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
		const state = reactive({ count: 0 });
		// console.log("reactive-state:", state);
		// state.count += 1;
		// console.log("state:", state);
		return state;
	},
	beforeCreate() {
		// console.log("beforeCreate");
	},
	created() {
		// console.log("created");
	},
	props: {
		name: {
			type: String,
			default: ""
		}
	}
};
</script>
<!--
一.setup
    1. setup 函数会在 beforeCreate 之后、created 之前执行
    2. setup 有2个参数
        props 的父组件传递过来的参数
        ctx 上下文对象
            ctx.attrs
            ctx.slots
            ctx.parent
            ctx.root
            ctx.emit
            ctx.refs
    3.在 setup() 函数中无法访问到 this

二. reactive
reactive() 函数接收一个普通对象，返回一个响应式的数据对象。

    import { reactive } from '@vue/composition-api'

    // 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
    const state = reactive({ count: 0 })
   eg:
    1. 定义响应式数据供 template 使用
        import { reactive } from '@vue/composition-api'
    2.在 setup() 函数中调用 reactive() 函数，创建响应式数据对象：
        setup() {
            // 创建响应式数据对象
            const state = reactive({count: 0})

                // setup 函数中将响应式数据对象 return 出去，供 template 使用
            return state
        }
    3.在 template 中访问响应式数据：
    <p>当前的 count 值为：{{count}}</p>

5.1 基本语法
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：

-->
